<template>
  <div class="twomonidey">
    <div class="title">同环比</div>
    <div class="barech" ref="barrefs"></div>
    <TopTitle @command="command" @daochu="daochu" @shuaxin="getechart(formdata)"></TopTitle>
    <div class="table">
      <TableColumn 
          :tableConfig="tableConfig" 
          :issize="iissize"
          :tableData="tableData" 
          ref="tablecolumn"
          ></TableColumn>
    </div>
  </div>
</template>
<script>
import {getcomparelistapi} from '@/api/energy-consumption/energy-consuming/ConsumingConfiguration'
import {GetEcharts} from '@/utils/echarts'
import {exportexcel} from '@/utils/excel'
import TableColumn from '@/components/Table'
import TopTitle from '@/components/TopTitle/newtitle'
export default {
  name: 'CallPoliceTwomonidey',
  components:{
    TopTitle,
    TableColumn
  },
  data() {
    return {
      formdata:{},
      iissize: 'medium',
      tableData: [],
      tableConfig: [
        { label: '序号', type:'index',width: '100',center:'center' },
        { label: '日期', prop: 'dateTime' ,center:'center'},
        { label: '设备', prop: 'equipName' },
        { label: '本日(kWh)', prop: 'thisValue' ,center:'right'},
        { label: '上月同期能耗(kWh)', prop: 'hbValue' ,center:'right'},
        { label: '去年同期能耗(kWh)', prop: 'tbValue' ,center:'right'},
        { label: '环比(%)', prop: 'hbRate' ,center:'right'},
        { label: '同比(%)', prop: 'tbRate' ,center:'right'},
      ]
    };
  },

  mounted() {
  },

  methods: {
    // 导出
    daochu() {
      exportexcel('/ecm-microservice-biz/ecm/tag/overview/exportExcel',this.formdata,'能耗同环比')
    },
    // 获取表格数据
    async getechart(val) {
      this.formdata=val
      this.$refs.tablecolumn.loading=true
      const { data: { list } } = await getcomparelistapi(val)
      this.tableData = list.map(ele => {
        return {
          ...ele,
          dateTime:val.dateString
        }
      })
      this.tableConfig.forEach(ele => {
        if (val.dateType == '1' && ele.prop == 'thisValue') {
          ele.label='本日能耗(kWh)'
        }
        if (val.dateType == '1' && ele.prop == 'hbValue') {
          ele.label='昨日同期能耗(kWh)'
        }
        if (val.dateType == '1' && ele.prop == 'tbValue') {
          ele.label='上月同期能耗(kWh)'
        }
        if (val.dateType == '2' && ele.prop == 'thisValue') {
          ele.label='本月能耗(kWh)'
        }
        if (val.dateType == '2' && ele.prop == 'hbValue') {
          ele.label = '上月同期能耗(kWh)'
        }
        if (val.dateType == '2' && ele.prop == 'tbValue') {
          ele.label='去年同期能耗(kWh)'
        }
        if (val.dateType == '3' && ele.prop == 'thisValue') {
          ele.label='本年同期能耗(kWh)'
        }
        if (val.dateType == '3' && ele.prop == 'hbValue') {
          ele.label='去年同期能耗(kWh)'
        }
      })
      this.$refs.tablecolumn.loading=false
      let option = {
        tooltip: {
          trigger: 'axis',
        },
        legend: {
          right:'2%'
        },
        grid: {
              top:'12%',
              left: '2%',
              right: '2%',
              bottom: '2%',
              containLabel: true
          },
        xAxis: [
          {
            type: 'category',
            data: list.map(ele=>ele.equipName),
            axisPointer: {
              type: 'shadow'
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '(kWh)',
          },
        ],
        series: [
          {
            name: val.dateType=='1'?'本日':val.dateType=='2'?'本月':'本年',
            type: 'bar',
            data: list.map(ele=>ele.thisValue)
          },
          {
            name: val.dateType=='1'?'昨日同期':val.dateType=='2'?'上月同期':'去年同期',
            type: 'bar',
            data: list.map(ele=>ele.hbValue)
          },
          {
            name: val.dateType=='1'?'上月同期':val.dateType=='2'?'去年同期':'去年同期',
            type: 'bar',
            data: list.map(ele=>ele.tbValue)
          },
        ]
      };
      GetEcharts(this,this.$refs.barrefs,option)
    },
    // 表格密度调节
    command(val) {
      this.iissize = val
    },
  },
};
</script>
<style scoped>
.twomonidey{
  height: 870px;
  background-color: #fff;
  padding: 20px;
  .title{
    font-weight: bold;
    color:#000;
  }
  .barech{
    height:250px;
    margin:10px 0;
  }
  .table{
    height:500px;
  }
}
</style>